<template>
	<view>
		<view class="tab1">
			<view class="ta" mode="aspectFill" @click="titClick" :class="{'blue':this.ShowHidden}">
				<view class="tit1">地方校友会</view>
				<image class="im" :src="tag" style="width: 30rpx; height: 30rpx;"></image>
			</view>
			<view class="Array" v-if="ShowHidden">
				<view v-if="join !==undefined && join.length > 0">
					<view class="tr"  v-for="(item,index) in join" :key="index">
						<image class="ima" src="../../static/images/xiaohui.png" style="width: 80rpx; height: 80rpx;"></image>
						<view class="td">
							<view class="tex">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view>
						<view class="nothing">{{message}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				tag:"../../static/images/arrow-right-filling.png",
				istag:true,
				ShowHidden: false,
				join:[],
				page:0,
				size:10,
				loaded:0,
				message:'暂无已加入地方校友会'
			}
		},
		props:{
			typeMsg:{
				type:Number,
			},
		},			
		computed: {
			...mapState(['userId', 'token', 'userName', 'wxNickName'])
		},
		methods: {
			loadMethod(loaded){
				if(loaded === 0){
					uni.request({
						url:app.globalData.URL+'associationUserInfo/queryType?userId='+this.userId+'&page='+this.page+'&size='+this.size+'&type='+this.typeMsg,
						method:'GET'
					})
					.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res]  = data;
						this.join = res.data;
						console.log("loadMethod", this.join);
					})
				}				
			},
			HiddenClick() {
				this.ShowHidden = false
			},
			titClick() {
				this.ShowHidden = !this.ShowHidden;
				if(this.istag===true){
					this.tag = '../../static/images/arrow-down-filling.png';
				}else{
					this.tag = '../../static/images/arrow-right-filling.png';
				}
				this.istag = !this.istag;
				this.loadMethod(this.loaded);
				this.loaded = 1;			
			},
			
		},
		
	}
</script>

<style>
	.nothing{
		text-align: center;
	}
	.tab1 {
		width: 95%;
		margin: 20rpx 20rpx;
		/* border-bottom: 1px solid #3F536E; */
	}

	.tex {
		margin-left: 10rpx;
		margin-top: 15rpx;
		color: #2C405A;
		font-size: 35rpx;
	}

	.td {
		margin-top: 20rpx;
		width: 600rpx;
		/* background-color: #F8F8F8; */
		border-radius: 3%;
	}

	.tex1 {
		margin-left: 10rpx;
		margin-top: 5rpx;
		color: #636363;
		font-size: 30rpx;
	}

	.ta {
		display: flex;

	}

	.im {
		margin-left: 460rpx;
		margin-top: 20rpx;
	}

	.tr {
		display: flex;

	}

	.ima {
		margin-top: 20rpx;
	}
</style>
